<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../layuiadmin/layui/css/layui.min.css" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
    <title></title>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-card" style="padding: 10px;">
            <div class="layui-form-item">
                <label class="layui-form-label">卡号 / 姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="search" placeholder="../卡号/姓名"
                        autocomplete="off" class="layui-input">
                </div>
                <button class="layui-btn" id="search">
                    查询
                </button>
            </div>
            <div id="test2" class="demo-transfer"></div>
        </div>
    </div>
</body>
<script src="../layuiadmin/layui/layui.min.js"></script>
<script>
    var $ = {};
    var transfer = {};
    function init(khs) {
        layui.use(['form', 'transfer'], function () {
            var form = layui.form;
            $ = layui.$;
            transfer = layui.transfer;

            transfer.render({
                elem: '#test2'
                , title: ['未选', '已选']  //自定义标题
                , data: [],
                value: khs,
                width: 320 //定义宽度
                , height: 400 //定义高度
                , id: 'teacherTranId'
            })

            $("#search").on("click", function (event) {
                updateTransfer($('input[name=search]').val(), transfer.getData('teacherTranId'));
            })

            updateTransfer();
            function updateTransfer(search, data = []) {
                $.ajax({
                    url: "../../Common/GetTeachers",
                    type: "get",
                    data: { search },
                    dataType: "json",
                    success(res) {
                        if (res.code == 0) {
                            var khs = data.map(x => x.value);
                            $.each(res.data, function (index, item) {
                                if (khs.indexOf(item.value) == -1) {
                                    data.push(item)
                                }
                            })
                            transfer.reload('teacherTranId', {
                                data
                            })
                        }
                    }
                })
            }
        });
    }
    function getResult() {
        return transfer.getData('teacherTranId');
    }
</script>

</html>